<template>
    <div>
        <footer class="footer">
            <div class="container">
                <nav class="nav">
                    <div class="name">中国政府采购网</div>
                    <div class="name">中国消防产品信息网</div>
                    <div class="name">消防规范网</div>
                    <div class="name">国家消防装备质量检验检测中心</div>
                    <div class="name">国家标准全文公开系统</div>
                </nav>
                <div class="couts">
                    <div class="item" v-for="(item, index) in counts" :key="index">
                        <div class="txt">{{ item.label }}</div>
                        <div class="num">
                            <countTo :startVal="startVal" :endVal="item.val" :duration="3000"></countTo>个
                        </div>
                    </div>
                </div>
                <div class="copyright">
                    <span>{{ baseInfo.copyright }}</span> <span class="ml-15">{{ baseInfo.beian }}</span>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
import countTo from 'vue-count-to'
export default {
    name: "XiaofangFooter",
    components: { countTo },
    props: {
        baseInfo: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            startVal: 0,
            counts: [
                {
                    val: this.baseInfo?.counts?.num1,
                    label: '供应商总数'
                },
                {
                    val: this.baseInfo?.counts?.num2,
                    label: '装备总数'
                },
                {
                    val: this.baseInfo?.counts?.num3,
                    label: '网站访问总数'
                }
            ],
        }
    },
    methods: {

    },
}
</script>
<style scoped lang="less">
.footer {
    background: #2e3033;

    .container {
        padding: 30px;

        .nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;

            .name {
                font-weight: 400;
                font-size: 16px;
                color: #ffffff;
            }
        }

        .couts {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 60px;

            .item {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 36px 0;
                background: #434548;

                .txt {
                    font-weight: normal;
                    font-size: 20px;
                    color: #FFFFFF;
                }

                .num {
                    font-weight: normal;
                    font-size: 20px;
                    color: #FFFFFF;
                    margin-left: 60px;
                }
            }
        }
    }

    .copyright {
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        margin-top: 60px;
    }
}
</style>